
import { formatTimeString } from '@/utils';
// css
import styles from "@/styles/CommonPersonal.module.scss";

const CouponItem = ({ data, receiveCouponFn }) => {
    const { state, validityType, couponType, couponDetailAppDTO } = data;
    let _rebatePrice = data.rebatePrice;
    let _discountPrice, _rebateMethod;
    if(couponDetailAppDTO){
        const { couponCashRuleDetailAppDTO, couponExperienceRuleDetailAppDTO, couponFullReduceRuleDetailAppDTO } = couponDetailAppDTO;
        const { rebateMethod } = couponCashRuleDetailAppDTO || couponExperienceRuleDetailAppDTO || couponFullReduceRuleDetailAppDTO || {};
        _rebateMethod = rebateMethod;
    }else{
        _rebateMethod = data.rebateMethod;
    }
    _discountPrice = _rebateMethod == 2 ? `${_rebatePrice/(_rebatePrice>=10 ? 10 : 1)}折` : "";
    return (
        <div 
            className={[
                styles['item'], 
                couponType !== 3 ? styles['ty'] : '',
                state == 2 ? styles['not-used'] : '', 
                (state == 3 || state == 6) ? styles['used'] : '', 
                state == 4 ? styles['expire'] : '', 
            ].join(' ')} 
        >
            <div className={styles['left']}>
                {
                    couponType == 1
                    ? <p className={styles['price']}>体验券</p>
                    : <p className={styles['price']}>￥<em>{_discountPrice || _rebatePrice}</em></p>
                }
                {
                    couponType == 2 && <p>满{data.satisfyPrice}可用</p> 
                }
                {
                    validityType == 1
                    ? <p>{formatTimeString(data.startTime)} - {formatTimeString(data.endTime)}</p>
                    : <p>
                        领取{data.validityDay}天内有效 <br/>
                        { couponType == 1 && state == 2 ? `已体验${data.experienceNumber-data.surplusExperienceNumber}次/待体验${data.surplusExperienceNumber}次` : '' }
                    </p>
                }
            </div>
            <div className={styles['center']}>
                <p className={styles['name']}>{data.name}</p>
                <p className={styles['code']}><span>券编号：</span>{data.couponCode}</p>
                <p className={styles['desc']}><span>使用规则：</span>{data.remark || '--'}</p>
            </div>
            <div className={styles['right']}>
                { state == 1 && <p onClick={() => { receiveCouponFn(data) }}>立即领取</p> }
            </div>
        </div>
    )
}
export default CouponItem